<template>
  <div>
    <h1>供应商管理</h1>
    <el-table
        :data="tableData.records"
        stripe
        style="width: 100%">
      <el-table-column
          prop="name"
          label="供应商名称"
          width="">
      </el-table-column>
      <el-table-column
          prop="leaderName"
          label="负责人"
          width="">
      </el-table-column>
      <el-table-column
          prop="leaderPhone"
          label="负责人电话">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址"
          width="">
      </el-table-column>
      <el-table-column
          prop="ranges"
          label="经营范围"
          width="">
      </el-table-column>
      <el-table-column
          prop="bank"
          label="银行卡号"
          width="">
      </el-table-column>
      <el-table-column
          prop=""
          label="操作"
          width="">
        <template #default="scope">
          <el-button type="danger" @click="audit(scope.row.vendorId)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        background
        layout="prev, pager, next, jumper"
        :total="tableData.total"
        @current-change="init"
    />

    <el-dialog
        v-model="showvendor"
        title="审核用户信息"
        width="40%"
    >

      <el-form :model="vendorObj" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="供应商名称：" prop="userName">
          {{ vendorObj.name }}
        </el-form-item>
        <el-form-item label="负责人姓名：" prop="realName">
          {{ vendorObj.leaderName }}
        </el-form-item>
        <el-form-item label="负责人电话：" prop="sex">
          {{ vendorObj.leaderPhone }}
        </el-form-item>
        <el-form-item label="地址" prop="phone">
          {{ vendorObj.address }}
        </el-form-item>
        <el-form-item label="经营范围：" prop="firm">
          {{ vendorObj.ranges }}
        </el-form-item>
        <el-form-item label="银行卡号：" prop="money">
          {{ vendorObj.bank }}
        </el-form-item>
        <el-form-item label="资质证图片：">
          <el-image
              style="width: 150px; height: 150px"
              :src="url1"
              :preview-src-list="srcLis1t">
          </el-image>
        </el-form-item>
        <el-form-item label="身份证图片：">
          <el-image
              style="width: 150px; height: 150px"
              :src="url2"
              :preview-src-list="srcList2">
          </el-image>
        </el-form-item>
        <el-form-item label="未通过原因：" prop="cause">
          <el-input type="textarea" v-model="cause" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="success()">通过</el-button>
          <el-button type="danger" @click="failed()">不通过</el-button>
          <el-button type="primary" @click="hidden()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 3,
      tableData: {},
      showvendor: false,
      vendorObj: {},
      url1: '',
      url2: '',
      cause: '',
    }
  }, methods: {
    init(pageNO) {
      axios.get("/project/vendor/findByVendorStatus", {
        params: {
          pageNO
        }
      }).then(resp => {
        this.tableData = resp.data
      })
    },
    success() {
      axios.get("/project/vendor/updateVendorStatus", {
        params: {
          vendorId: this.vendorObj.vendorId,
          status: 1,
          str: this.cause
        }
      }).then(resp => {
        if (resp.data() == "ok") {
          this.$message({
            message: "审核成功",
            type: "success",
            showClose: true,
          });

        }
      })
      this.showvendor = false
      this.init(1)
    },
    failed() {
      axios.get("/project/vendor/updateVendorStatus", {
        params: {
          vendorId: this.vendorObj.vendorId,
          status: 2,
          str: this.cause
        }
      }).then(resp => {
        if (resp.data() == "ok") {
          this.$message({
            message: "审核成功",
            type: "success",
            showClose: true,
          });

        }
      })
      this.showvendor = false
      this.init(1)
    },
    hidden() {
      this.showvendor = false
    },
    audit(vendorId) {
      this.showvendor = true
      this.url1 = '';
      this.url2 = '';
      axios.get("/project/vendor/findById", {
        params: {
          vendorId
        }
      }).then(resp => {
        this.vendorObj = resp.data
        this.url1 = this.vendorObj.aptitudeImage
        this.url2 = this.vendorObj.idImage
      })
    }
  }, created() {
    this.init(1)
  }
}
</script>

<style scoped>

</style>